<template>
    <div class="all_role">
        <div class="role_card">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <div class="left">
                            <span>角色管理</span>
                        </div>
                        <div class="right">
                            <el-button type="primary" @click="add_new_role">添加角色</el-button>
                            <el-button type="primary">批量删除</el-button>
                            
                        </div>
                    </div>
                </template>
                <div class="role_list">
                    <el-table :data="zhanshi_role" style="width: 100%">
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="name" label="名称"  />
                        <el-table-column prop="data_scope" label="数据权限"  />
                        <el-table-column prop="description" label="描述" />
                        <el-table-column prop="status" label="状态" />
                        <el-table-column  label="操作" >
                            <template #default="scoped">
                                <el-button type="success" text  @click="quanxian_fenpei(scoped.row)">分配权限</el-button>
                                <el-button type="success" text >编辑</el-button>
                                <el-button type="success" text >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-card>
        </div>
        <div class="add_role_card">
            <el-dialog
                v-model="kapian_kongzhi"
                title="新建角色"
                width="30%"
                :before-close="handleClose">
                    <template #default>
                        <div class="tianjiao">
                            <div style="height: 1px; width: 100%; background: black;"></div>
                            <div class="jinshuru">
                                <el-input v-model="fasong_data.name" placeholder="请输入角色名称" />
                                <el-input v-model="fasong_data.level" placeholder="请输入角色级别" />
                                <el-input v-model="fasong_data.description" placeholder="请输入角色描述" />
                            </div>
                            <div class="xuanze">
                                <el-select
                                    v-model="fasong_data.data_scope"
                                    placeholder="选择数据范围"
                                    size="large"
                                    style="width: 240px">
                                    <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"/>
                                </el-select>
                            </div>
                            <div class="tree">
                                <el-tree-select
                                    v-model="fasong_data.depts"
                                    :data="tree_list"
                                    :render-after-expand="false"
                                    check-strictly
                                    style="width: 240px"/>
                            </div>
                            <div class="zhuangtai">
                                <el-radio-group v-model="fasong_data.status">
                                    <el-radio label="true" size="large">激活</el-radio>
                                    <el-radio label="false" size="large">禁用</el-radio>
                                </el-radio-group>
                            </div>
                            <div style="height: 1px; width: 100%; background: black;"></div>
                            <div class="anniu">
                                <el-button @click="quxiao">取消</el-button>
                                <el-button type="primary" @click="add_role_ok">确定添加</el-button>
                            </div>
                        </div>
                    </template>
            </el-dialog>
        </div>
        <div class="menu_quanxian">
            <el-card class="box-card">
                <span>权限分配</span>
                <div class="menu_list">
                    <el-dialog
                        v-model="anniu_duihuakuang"
                        title="分配权限"
                        width="40%"
                        :before-close="menu_handleClose">
                            <template #default>
                                <div class="shang">
                                    <el-tree
                                        :data="menu_tree"
                                        show-checkbox
                                        node-key="value"
                                        :default-expand-all="true"
                                        check-strictly
                                        :default-expanded-keys="[2, 3]"
                                        ref="TreeRef"
                                    />
                                </div>
                                <div class="xia">
                                    <div style="height: 1px; width: 100%; background: black; margin-top: 10px; margin-bottom: 10px;"></div>
                                    <div class="anniu" style="margin-left: 50px;">
                                        <el-button @click="anniu_quxiao">取消</el-button>
                                        <el-button type="primary" @click="anniu_queding">确定</el-button>
                                    </div>
                                </div>
                            </template>
                    </el-dialog>
                </div>
                
            </el-card>
        </div>
    </div>
</template>

<script setup name="role">
import {ref} from 'vue'
import {get_role_list, add_role, get_one_role, put_one_role} from '@/apis/role'
import {tree_dept} from '@/apis/department'
import {tree_menu} from '@/apis/menu'

const zhanshi_role = ref([])
const kapian_kongzhi = ref()
const tree_list = ref()
const menu_tree = ref([])
const anniu_duihuakuang = ref(false)
const is_enabled = ref('1')
const now_scoped_id = ref()
const options = [
  {
    value: '全部',
    label: '全部',
  },
    {
    value: '本级',
    label: '本级',
  },
    {
    value: '自定义',
    label: '自定义',
  },
]
const TreeRef = ref(null)

const fasong_data = ref({
    name:'',
    level: '',
    description:'',
    data_scope: '',
    depts: '',
    status: "true"
})

const xuanze_tree = ref()
const handleClose = (done) => {
    done()
    fasong_data.value.name = ''
    fasong_data.value.level = 0
    fasong_data.value.description = ''
    fasong_data.value.data_scope = ''
    fasong_data.value.depts = ''
    fasong_data.value.status = 'true'
}
const menu_handleClose = (done) => {
    done()
}
const role_list = async() => {
    let res = await get_role_list()
    let dept_tree = await tree_dept()
    let in_menu_tree = await tree_menu()
    console.log('menu_tree:::', in_menu_tree.results)
    zhanshi_role.value = res.results
    tree_list.value = dept_tree.result
    menu_tree.value = in_menu_tree.results
}
const add_new_role = () => {
    kapian_kongzhi.value = true
}
const quxiao = () => {
    anniu_duihuakuang.value = false
}
const add_role_ok = async() => {
    console.log("role_fasong:::", fasong_data.value)
    if(fasong_data.value.status == "true"){
        fasong_data.value.status = true
    }else{
        fasong_data.value.status = false
    }
    await add_role(fasong_data.value)
    role_list()
    kapian_kongzhi.value = false
}

const anniu_quxiao = () => {
    anniu_duihuakuang.value = false
}

role_list()


const quanxian_fenpei = async(scoped) => {
    anniu_duihuakuang.value = true
    let res = await get_one_role(scoped.id)
    console.log("one_role",res.result)
    TreeRef.value.setCheckedKeys(res.result.menus)
    fasong_data.value.name = res.result.name
    fasong_data.value.id = res.result.id
    fasong_data.value.level = res.result.level
    fasong_data.value.description = res.result.description
    fasong_data.value.data_scope = res.result.data_scope
    fasong_data.value.status = res.result.status

}
const anniu_queding = async() => {
    let menus = TreeRef.value.getCheckedKeys()
    fasong_data.value.menus = menus
    let res = await put_one_role(fasong_data.value.id, fasong_data.value)
    anniu_duihuakuang.value = false
    role_list()
}
</script>

<style lang="scss" scoped>
.all_role{
    .role_card{
        .box-card{
            .card-header{
                display: flex;
                align-items: center;
                justify-content: space-between;
                .left{
                    padding-left: 20px;
                }
                .right{
                    padding-right: 20px;
                }
            }
        }
    }
    .add_role_card{
        .tianjiao{
            display: flex;
            flex-direction: column;
            gap: 15px;
            .jinshuru{
                display: flex;
                flex-direction: column;
                gap: 5px;
            }
            // .xuanze{

            // }
            // .tree{

            // }
            // .zhuangtai{

            // }
            .anniu{
                padding-left: 40px;
            }
        }
    }
}
</style>